<template>
    <div class="container"><div style="position:relative">
        <swiper :options="options">
            <swiper-slide v-for="(item,index) of items" :key="index">
                <img class="img" :src="item" />
            </swiper-slide>
        </swiper>
        <div class="swiper-pagination"></div>
    </div></div>
</template>

<script>
    export default {
        name: "gallery",
        props:{
            items:Array,
        },
        data(){
            return{
                options:{
                    pagination:'.swiper-pagination',
                    paginationType:'fraction'
                }
            }
        }
    }
</script>

<style scoped lang="stylus">
    .swiper-pagination
        bottom:-1rem
        color:white
    .container
        z-index:1
        background-color:black
        bottom:0
        top:0
        left:0
        right:0
        position:absolute
        display:flex
        flex-direction:column
        justify-content:center
    .img
        width:100%
</style>